```svelte {3,5-10}
<script lang="ts">
  import { writable } from "svelte/store"

  const value = writable("")

  const service = useMachine(navigationMenu.machine, {
    id: "nav",
    value: $value,
    onValueChange: (details) => value.set(details.value),
  })

  const api = $derived(navigationMenu.connect(service, normalizeProps))
</script>

<div>
  <button on:click={() => value.set("products")}>Open Products</button>
  <button on:click={() => value.set("")}>Close All</button>

  <nav {...api.getRootProps()}>
    <!-- ... navigation items ... -->
  </nav>
</div>
```
